<template>
    <!--  有下划线有备注详情模型 -->
    <div class="eChartsType" >
        <div class="content">
          <div class="header">
            <p class="title">{{pageItem.title}}</p>
            <el-tooltip :content="pageItem.describes" placement="top">
              <i class="iconfont iconshuoming cursor-pointer"></i>
            </el-tooltip>

          </div>
          <div class="center flex_between">
            <p><span class="font_50 blueColor">{{pageItem.oneValue | NumFormat}}</span><span>{{pageItem.oneValueSuffix}}</span>
            </p>
          </div>
          <div class="bottom">
            <p><span>{{pageItem.varString }}</span></p>
          </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'eChartsType',
        props: {
          pageItem: {
            type: Object
          }
        }
    }
</script>

<style scoped lang="scss">
  .eChartsType{
    height:100%;
    width:100%;
    .center{
      padding-bottom:20px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      box-sizing: border-box;
    }
  }

</style>
